<script lang="ts" setup>
import { reactive } from 'vue';

// typescript
const form = reactive({
  phone: "",
  verifyCode: "",
  agree: true
});
</script>

<!-- 登录页 -->
<template>
  <view class="container">
    <!-- 头部导航 -->
    <view class="header-nav">
      <view class="statusbar"></view>
      <view class="header-view">
        <view>
          <navigator open-type="navigateBack">
            <uni-icons color="#fff" type="back" size="20"></uni-icons>
          </navigator>
        </view>
        <!-- 标题 -->
        <view class="nav-title"></view>
      </view>
    </view>
    <view class="login-form">
      <view class="log-view">
        <image src="../../static/images/default/avatar.png"></image>
      </view>
      <view class="form-view">
        <view class="input-view">
          <uni-easyinput type="idcard" :maxlength="11" v-model="form.phone" placeholder="请输入手机号码" />
        </view>
        <view class="input-view verify-code">
          <uni-easyinput type="idcard" :maxlength="6" v-model="form.phone" placeholder="请输入验证码" />
          <view class="getcode-view">
            <button class="custom-button">获取验证码</button>
          </view>
        </view>
        <view class="agree-view">
          <w-checkbox v-model:checked="form.agree" independent :value="1" :icon-size="14" checked-color="#FF6A00">
            <view class="label">
              登录即代表阅读并同意<text>《用户协议》</text>和<text>《隐私政策》</text>
            </view>
          </w-checkbox>
        </view>
        <view class="button-box">
          <button class="custom-button custom-button-primary">登录</button>
        </view>
      </view>
    </view>
    <!-- 其他方式登录 -->
    <view class="other-mode">
      <view class="mode-title">
        - 其他方式登录- 
      </view>
      <view class="icon-box">
        <view class="icon wechat">
          <uni-icons color="#fff" type="weixin" size="30"></uni-icons>
        </view>
        <view class="icon qq">
          <uni-icons color="#fff" type="qq" size="30"></uni-icons>
        </view>
        <view class="icon wb">
          <uni-icons color="#fff" type="weibo" size="30"></uni-icons>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
// scss
.header-nav {

  .header-view {
    height: $header-height;
    padding: 0 30rpx;
    display: flex;
    align-items: center;

    .nav-title {
      text-align: center;
      flex: 1;
      color: #fff;
      font-size: 28rpx;
    }
  }
}

.container {
  background: linear-gradient(180deg, #ff6a00 0%, #f8ad77 57%, #f2f2f2 79%, #f2f2f2 100%);
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.login-form {
  flex: 1;
  padding: 0 30rpx;

  .log-view {
    margin: 40rpx 0;
    text-align: center;

    image {
      width: 160rpx;
      height: 160rpx;
    }
  }
}

.form-view {
  .input-view {
    margin-bottom: 20rpx;

    :deep(.uni-easyinput) {
      .uni-easyinput__content {
        background-color: #fff;
        height: 70rpx;
        border: none;
      }
    }

    &.verify-code {
      display: flex;

      .getcode-view {
        background-color: #fff;
        margin-left: 30rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200rpx;
        height: 70rpx;
        border-radius: 4px;
        color: $text-color;

        button {
          width: 100%;
          height: 100%;
          font-size: 24rpx;
        }
      }
    }
  }

  .agree-view {
    margin-top: 40rpx;
    .label {
      font-size: 24rpx;
      color: #ccc;
      padding-top: 2rpx;

      text {
        color: #fff;
      }
    }
  }

  .button-box {
    margin-top: 80rpx;

    button {
      width: 100%;
      border-radius: 999px;
      border: none;
    }
  }
}

.other-mode {
  height: 360rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .mode-title {
    font-size: 28rpx;
    color: $text-color;
  }

  .icon-box {
    display: flex;
    margin-top: 50rpx;

    .icon {
      margin-right: 30rpx;
      width: 80rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      border-radius: 50%;
      background-color: #41AE3F;
      color: #fff;

      &.wechat {
        background-color: #41AE3F;
      }

      &.qq {
        background-color: #29A1F7;
      }

      &.wb {
        background-color: #DA261D;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
